import React from "react";
import {observer, inject} from 'mobx-react';
import {toJS} from "mobx";
import {withRouter} from 'react-router-dom';
import {Tools, List, Radio,Flex} from "weaver-mobile";
import {BrowserHrm, RouteLayout} from "weaver-mobile-page";

const getLabel = Tools.getLabel;
const ButtonGroup = RouteLayout.ButtonGroup;

@inject("updateOperatorStore")
@withRouter
@observer
export default class updateOperatorFlowAdd extends React.Component {
    constructor(props) {
        super(props);
    }
    componentDidMount(){
        const {flowAddLayout, initFlowAdd} = this.props.updateOperatorStore;
        initFlowAdd(flowAddLayout.path)
    }

    render() {
        return (
            <div className={"updateOperator-flowAdd"}>
                {this.getFlowNodeComp()}
                {this.showSelectNodeCom()}
                <ButtonGroup
                    data={this.getButtons()}
                    flexStyles={this.getFlextStyles()}
                />
            </div>
        );
    }

    /**
     * 取消
     */
    onCancel = () => {
        this.props.history.go(-1);
    }

    onSearch=()=>{
        this.onCancel();
    }

    /**
     * 底部按钮
     * @returns {Array}
     */
    getButtons = () => {
        const {updateOperatorStore} = this.props;
        const {goSave} = updateOperatorStore;
        let buttons = [];
        buttons.push({
            key: 'submit',
            text: getLabel(86, "保存"),
            onClick: () => {goSave(this.onSearch)},
            type: 'primary',
        });
        return buttons;
    }

    /**
     * 显示按钮样式
     * @returns {{style: {flex: number}}[]}
     */
    getFlextStyles = () => {
        const flextStyles = [{
            style: {flex: 1}
        },{
            style: {flex: 1}
        }
        ];
        return flextStyles;
    }

    /**
     * 显示当前能控制的节点
     */
    showSelectNodeCom = () => {
        const items = [];
        const {updateOperatorStore} = this.props;
        const { browserOperator, changeSelectHrm, selected = {}} = updateOperatorStore;
        const {userList} = selected;


        /* TODO 用于控制操作人员范围
        let browserParams = {}, completeParams = {}, viewAttr = 3;
        if (selected && selected.nodeId) {//节点已选则
            viewAttr = 3;
            //数据筛选
            let sltnode = nodeOptions.filter(item => {
                return item.key == selected.nodeId;
            });
            if (sltnode.length > 0) {
                const {sqlwhereq, sqlwherel} = sltnode[0];
                browserParams.sqlwhere = sqlwhereq;
                completeParams.sqlwhere = sqlwherel;
            }
        }*/
        //选择人员
        items.push(
            <BrowserHrm
                label={getLabel(33356, "操作人员")}
                store={browserOperator}
                hasAdvanceSerach={true}
                isSingle={false}
                viewAttr={2}
                type={1}
                onChange={(value, valueSpan, valueArray)=>{
                    changeSelectHrm(value, valueSpan, valueArray)
                }}
                valueArray={userList}
                // conditionDataParams={{...browserParams}}
                // completeParams={{...completeParams}}
                // dataParams={{...browserParams}}
            />
        );
        return <List>
            {items}
        </List>
    }
    getFlowNodeComp=()=>{
        const {updateOperatorStore} = this.props;
        const {coreparams = {}, selected={}, changeSelectNode} = updateOperatorStore;
        const {nodeId} = selected;
        let {nodeOptions = []} = coreparams;
        return <Flex style={{ padding: '15px 7px 15px 22px' }}>
            <Flex.Item style={{ padding: '15px 0',  flex: 'none' }}>{getLabel(	511479, "流转环节")}</Flex.Item>
            <Flex.Item>
                {
                    nodeOptions.map(item => {
                        return <div className={"item-radio"}>
                            <Radio className="my-radio" key={item.key}
                                   checked={item.key == nodeId}
                                   onChange={e => {
                                       changeSelectNode(item.key, item.showname);
                                   }}>
                                {item.showname}
                            </Radio>
                        </div>
                    })
                }
            </Flex.Item>
        </Flex>
    }
}